<template>
  <view class="page">
    <!-- <view class="real-top">
     <rich-text :nodes="contentText" />
    </view> -->
    <view class="list">
      <view
        class="item"
        v-for="(item, index) in list"
        :key="index"
        @click="itemClick(item, index)"
      >
        {{ item[label] }}
        <view :class="{ active: checkedIndex === index, radio: true }" />
      </view>
    </view>
    <!-- <view class="primary-btn">
      <button @click="next">确认选择</button>
    </view> -->
  </view>
</template>

<script>
	import api from '@/common/api.js'

export default {
  name: 'GradientColorRadioList',

  props: {
   label: {
    type: String,
    default: 'label'
   },

   list: {
    type: Array,
    default: () => []
   },

   checkedIndex: {
     type: Number,
     default: -1
   }
  },

  data() {
    return {
      img_url: this.$GLOBAL.BASE_IMG,
    };
  },

  onLoad() {
  // api.getSysAppMore({
		// 	hosId: uni.getStorageSync('hosId'),
		// 	sysCode: this.$GLOBAL.SYS_CODE,
		// 	typeFlag: 901
		// }).then(({code, result}) => {
  //     if (code === '0') {
  //       this.contentText = result.content;
  //     }
  //   }) 
  },

  methods: {
    itemClick(item, index) {
      console.log(item, index, '基础组件');
      this.$emit('update:checkedIndex', index);
      this.$emit('radioChange', {item, index});
    },
  },
};
</script>

<style lang="scss" scoped>
$img_url: 'http://dev.phs.eheren.com/pcloud/image/';

.page {
  // height: 100%;
  background: #f8f8f8;
  // overflow: auto;
    .real-top {
			min-height: 56upx;
			padding: 10upx 30upx;
			background: rgba(255, 163, 78, 0.0706);
			text-align: left;
			color: #ff8053;
			font-size: 28upx;
		}

  .title {
    margin: 80upx 0;
    font-size: 50upx;
    text-align: center;
  }

  .list {
    // margin-top: 40rpx;

    .item {
      position: relative;
      margin: 0 30upx 60upx 30upx;
      padding: 0 50upx;
      height: 140upx;
      line-height: 140upx;
      color: #fff;
      font-size: 34upx;
      background: #64e2d0;
      background: linear-gradient(
        270deg,
        rgba(94, 233, 200, 1) 0%,
        rgba(105, 222, 213, 1) 100%
      );
      box-shadow: 0px 7px 8px rgba(94, 233, 200, 0.5);
      border-radius: 10upx;

      &:nth-child(2) {
        background: #62c0fe;
        background: linear-gradient(
          270deg,
          rgba(97, 217, 255, 1) 0%,
          rgba(99, 183, 254, 1) 100%
        );
        box-shadow: 0px 7px 8px rgba(97, 217, 255, 0.5);
      }

      &:nth-child(3) {
        background: #b49fff;
        background: linear-gradient(
          270deg,
          rgba(174, 175, 255, 1) 0%,
          rgba(186, 143, 255, 1) 100%
        );
        box-shadow: 0px 7px 8px rgba(174, 175, 255, 0.5);
      }

      &:nth-child(4) {
        background: #fe9891;
        background: linear-gradient(
          270deg,
          rgba(254, 166, 151, 1) 0%,
          rgba(254, 145, 143, 1) 100%
        );
        box-shadow: 0px 7px 8px rgba(254, 166, 151, 0.5);
      }
      &:nth-child(5) {
        background: #64e2d0;
        background: linear-gradient(
          270deg,
          rgba(94, 233, 200, 1) 0%,
          rgba(105, 222, 213, 1) 100%
        );
        box-shadow: 0px 7px 8px rgba(94, 233, 200, 0.5);
      }
      &:nth-child(6) {
        background: #62c0fe;
        background: linear-gradient(
          270deg,
          rgba(97, 217, 255, 1) 0%,
          rgba(99, 183, 254, 1) 100%
        );
        box-shadow: 0px 7px 8px rgba(97, 217, 255, 0.5);
      }
      &:nth-child(7) {
        background: #b49fff;
        background: linear-gradient(
          270deg,
          rgba(174, 175, 255, 1) 0%,
          rgba(186, 143, 255, 1) 100%
        );
        box-shadow: 0px 7px 8px rgba(174, 175, 255, 0.5);
      }

      .radio {
        position: absolute;
        top: calc(50% - 22upx);
        right: 40upx;
        width: 44upx;
        height: 44upx;
        border-radius: 50%;
        overflow: hidden;
        background: #fff;

        &.active {
          background: url($img_url + 'ic_xuanze@2x.png') transparent;
          background-size: 100% 100%;
        }
      }
    }
  }

  .primary-btn {
    margin-top: 90upx;
  }
}
</style>
